<template>
  <div class="allCity">
       <my-head title="请选择城市"></my-head>
       <div class="search">
            <van-search
            v-model.trim="keyword"
            show-action
            placeholder="请输入城市名或拼音"
            @search="onSearch"
            @cancel="onCancel"
            />
       </div>
       <div v-if="flag">
            <div class="city_hot">
                    <div class="city_1">
                        <div class="city_1_title" style=" color: #797d82;">GPS定位你所在城市</div>
                        <div class="city_1_fail">定位失败</div>
                    </div>
                    <div class="city_2" >
                        <div class="city_2_title" style=" color: #797d82;">热门城市</div>
                        <div>
                            <ul class="city_2_hot">
                                <li class="cityHot" v-for="(item,index) in hotCity" :key="index" @click="chooseCity(item)">{{item.name}}</li>
                            </ul>
                        </div>
                    </div>
            </div>
            <div>
                    <van-index-bar>
                        <div  v-for="(item,index) in pylist" :key="index">
                        <van-index-anchor :index="item"/>

                        <van-cell
                        :title="l.name"
                        v-for="(l,i) in cityList.filter(val=>val.pinyin.indexOf(item.toLowerCase())==0)"
                        :key='i' 
                        @click="chooseCity(l)"
                        />

                        </div>
                    </van-index-bar>
            </div>
       </div>
       <div v-else>
            <div v-if="list.length>0">
                <van-cell
                :title="l.name"
                v-for="(l,i) in list"
                :key='i' 
                @click="chooseCity(l)"
                />
            </div>
            <div v-else class="nosearch">
                <img src="@/assets/image/nosearch.png" alt="">
                <p>没有找到匹配的城市</p>
            </div>

       </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
data() {
    return {
      keyword: '',
        pylist:[
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                // "U",
                // "V",
                "W",
                "X",
                "Y",
                "Z",
            ],
            hotCity:[],
            flag:'true',
            list:[],
            flag_1:'true'
    };
  },
  beforeRouteLeave (to, from, next) {
      if(!this.city){
          next(false)
          this.$toast("请你选择所在的城市")
      }else{
          next()
      }
  },
  methods: {
    onSearch(val) {
            this.flag=false
            this.list=this.cityList.filter(v=>{
                return v.name.indexOf(val)>-1 || v.pinyin.indexOf(val)>-1
        })
    },
    onCancel() {
      this.flag=true
     this.list=[]
     this.keyword=""
    },
    async getCityList(){
        let res= await this.$ajax.getMZdata({},{
            'X-Host':' mall.film-ticket.city.list'
        }).then(res=>{
            this.changeCityList(res.data.cities)
          
          //找到热门的城市
            this.hotCity=this.cityList.filter(v=>{
               return v.isHot==1
            })

            
        })
  },
  //选择城市后跳转到
  chooseCity(val){
      this.changeCity(val)
      this.$router.back()
  }
},
mounted() {
    this.getCityList()
},
}
</script>

<style>
.allCity    {
    padding-top: 95px;
}
.van-search{
    box-sizing: border-box;
    z-index: 2;
    height: 49px;
    width: 100vw;
    padding: 9.5px 15px;
    background-color: #f4f4f4;
    position: fixed;
    top: 44px;
}
.city_hot{
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    font-size: 12px;
    width: 100%;
    height: 194px;
}
.city_1_fail{
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 7.5px;
    width: 100px;
    font-size: 14px;
    text-align: center;
    color: #191a1b;
    margin-top: 10px;
    margin-bottom: 10px;
}
.city_2_hot{
    display: flex;
    flex-wrap:wrap ;
}
.city_2_hot li{
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 10px 7.5px;
    font-size: 14px;
    color: #191a1b;
    width: 100px;
    text-align: center;
    
}
.nosearch{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>